<template>
  <div class="simple-emoji-picker">
    <!-- 最近使用 -->
    <div v-if="displayRecentEmojis.length > 0" class="recent-section">
      <div class="section-title">最近使用</div>
      <div class="emoji-grid recent-grid">
        <button
          v-for="emoji in displayRecentEmojis"
          :key="'recent-' + emoji"
          class="emoji-btn"
          :title="getEmojiName(emoji)"
          @click="selectEmoji(emoji)"
        >
          {{ emoji }}
        </button>
      </div>
    </div>

    <!-- 分类标签 -->
    <div class="emoji-categories">
      <button
        v-for="category in categories"
        :key="category.id"
        :class="['category-btn', { active: activeCategory === category.id }]"
        :title="category.name"
        @click="setActiveCategory(category.id)"
      >
        {{ category.icon }}
      </button>
    </div>

    <!-- 表情网格 -->
    <div class="emoji-grid main-grid">
      <button
        v-for="emoji in currentCategoryEmojis"
        :key="emoji"
        class="emoji-btn"
        :title="getEmojiName(emoji)"
        @click="selectEmoji(emoji)"
      >
        {{ emoji }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";

interface EmojiCategory {
  id: string;
  name: string;
  icon: string;
  emojis: string[];
}

const emit = defineEmits<{
  select: [emoji: string];
}>();

const activeCategory = ref("smileys");
const recentEmojis = ref<string[]>([]);

// 表情分类数据
const categories: EmojiCategory[] = [
  {
    id: "smileys",
    name: "笑脸",
    icon: "😀",
    emojis: [
      "😀",
      "😃",
      "😄",
      "😁",
      "😆",
      "😅",
      "😂",
      "🤣",
      "😊",
      "😇",
      "🙂",
      "🙃",
      "😉",
      "😌",
      "😍",
      "🥰",
      "😘",
      "😗",
      "😙",
      "😚",
      "😋",
      "😛",
      "😝",
      "😜",
      "🤪",
      "🤨",
      "🧐",
      "🤓",
      "😎",
      "🤩",
      "🥳",
      "😏",
      "😒",
      "😞",
      "😔",
      "😟",
      "😕",
      "🙁",
      "☹️",
      "😣",
      "😖",
      "😫",
      "😩",
      "🥺",
      "😢",
      "😭",
      "😤",
      "😠",
      "😡",
      "🤬"
    ]
  },
  {
    id: "people",
    name: "人物",
    icon: "👤",
    emojis: [
      "👋",
      "🤚",
      "🖐️",
      "✋",
      "🖖",
      "👌",
      "🤌",
      "🤏",
      "✌️",
      "🤞",
      "🤟",
      "🤘",
      "🤙",
      "👈",
      "👉",
      "👆",
      "🖕",
      "👇",
      "☝️",
      "👍",
      "👎",
      "👊",
      "✊",
      "🤛",
      "🤜",
      "👏",
      "🙌",
      "👐",
      "🤲",
      "🤝",
      "🙏",
      "✍️",
      "💅",
      "🤳",
      "💪",
      "🦾",
      "🦿",
      "🦵",
      "🦶",
      "👂"
    ]
  },
  {
    id: "nature",
    name: "动物",
    icon: "🐶",
    emojis: [
      "🐶",
      "🐱",
      "🐭",
      "🐹",
      "🐰",
      "🦊",
      "🐻",
      "🐼",
      "🐨",
      "🐯",
      "🦁",
      "🐮",
      "🐷",
      "🐽",
      "🐸",
      "🐵",
      "🙈",
      "🙉",
      "🙊",
      "🐒",
      "🐔",
      "🐧",
      "🐦",
      "🐤",
      "🐣",
      "🐥",
      "🦆",
      "🦅",
      "🦉",
      "🦇",
      "🐺",
      "🐗",
      "🐴",
      "🦄",
      "🐝",
      "🐛",
      "🦋",
      "🐌",
      "🐞",
      "🐜"
    ]
  },
  {
    id: "food",
    name: "食物",
    icon: "🍎",
    emojis: [
      "🍎",
      "🍐",
      "🍊",
      "🍋",
      "🍌",
      "🍉",
      "🍇",
      "🍓",
      "🫐",
      "🍈",
      "🍒",
      "🍑",
      "🥭",
      "🍍",
      "🥥",
      "🥝",
      "🍅",
      "🍆",
      "🥑",
      "🥦",
      "🥬",
      "🥒",
      "🌶️",
      "🫑",
      "🌽",
      "🥕",
      "🫒",
      "🧄",
      "🧅",
      "🥔",
      "🍠",
      "🥐",
      "🥖",
      "🍞",
      "🥨",
      "🥯",
      "🧀",
      "🥚",
      "🍳",
      "🧈"
    ]
  },
  {
    id: "activity",
    name: "活动",
    icon: "⚽",
    emojis: [
      "⚽",
      "🏀",
      "🏈",
      "⚾",
      "🥎",
      "🎾",
      "🏐",
      "🏉",
      "🥏",
      "🎱",
      "🪀",
      "🏓",
      "🏸",
      "🏒",
      "🏑",
      "🥍",
      "🏏",
      "🪃",
      "🥅",
      "⛳",
      "🪁",
      "🏹",
      "🎣",
      "🤿",
      "🥊",
      "🥋",
      "🎽",
      "🛹",
      "🛼",
      "🛷",
      "⛸️",
      "🥌",
      "🎿",
      "⛷️",
      "🏂",
      "🪂",
      "🏋️",
      "🤼",
      "🤸",
      "⛹️"
    ]
  },
  {
    id: "travel",
    name: "旅行",
    icon: "🚗",
    emojis: [
      "🚗",
      "🚕",
      "🚙",
      "🚌",
      "🚎",
      "🏎️",
      "🚓",
      "🚑",
      "🚒",
      "🚐",
      "🛻",
      "🚚",
      "🚛",
      "🚜",
      "🏍️",
      "🛵",
      "🚲",
      "🛴",
      "🛺",
      "🚨",
      "🚔",
      "🚍",
      "🚘",
      "🚖",
      "🚡",
      "🚠",
      "🚟",
      "🚃",
      "🚋",
      "🚞",
      "🚝",
      "🚄",
      "🚅",
      "🚈",
      "🚂",
      "🚆",
      "🚇",
      "🚊",
      "🚉",
      "✈️"
    ]
  },
  {
    id: "objects",
    name: "物品",
    icon: "💎",
    emojis: [
      "⌚",
      "📱",
      "📲",
      "💻",
      "⌨️",
      "🖥️",
      "🖨️",
      "🖱️",
      "🖲️",
      "🕹️",
      "🗜️",
      "💽",
      "💾",
      "💿",
      "📀",
      "📼",
      "📷",
      "📸",
      "📹",
      "🎥",
      "📽️",
      "🎞️",
      "📞",
      "☎️",
      "📟",
      "📠",
      "📺",
      "📻",
      "🎙️",
      "🎚️",
      "🎛️",
      "🧭",
      "⏱️",
      "⏲️",
      "⏰",
      "🕰️",
      "⌛",
      "⏳",
      "📡",
      "🔋"
    ]
  },
  {
    id: "symbols",
    name: "符号",
    icon: "❤️",
    emojis: [
      "❤️",
      "🧡",
      "💛",
      "💚",
      "💙",
      "💜",
      "🖤",
      "🤍",
      "🤎",
      "💔",
      "❣️",
      "💕",
      "💞",
      "💓",
      "💗",
      "💖",
      "💘",
      "💝",
      "💟",
      "☮️",
      "✝️",
      "☪️",
      "🕉️",
      "☸️",
      "✡️",
      "🔯",
      "🕎",
      "☯️",
      "☦️",
      "🛐",
      "⛎",
      "♈",
      "♉",
      "♊",
      "♋",
      "♌",
      "♍",
      "♎",
      "♏",
      "♐"
    ]
  }
];

// 显示的最近使用表情（最多12个，填满一行）
const displayRecentEmojis = computed(() => {
  if (!recentEmojis.value || !Array.isArray(recentEmojis.value)) {
    return [];
  }
  return recentEmojis.value.slice(0, 12);
});

// 当前分类的表情（限制为8行，每行12个，共96个）
const currentCategoryEmojis = computed(() => {
  const category = categories.find(cat => cat.id === activeCategory.value);
  if (!category || !category.emojis || !Array.isArray(category.emojis)) {
    return [];
  }
  return category.emojis.slice(0, 96);
});

// 设置活动分类
const setActiveCategory = (categoryId: string) => {
  activeCategory.value = categoryId;
};

// 选择表情
const selectEmoji = (emoji: string) => {
  if (!emoji) return;

  emit("select", emoji);

  try {
    // 确保 recentEmojis 是数组
    if (!Array.isArray(recentEmojis.value)) {
      recentEmojis.value = [];
    }

    // 添加到最近使用（最多12个）
    if (!recentEmojis.value.includes(emoji)) {
      recentEmojis.value.unshift(emoji);
      if (recentEmojis.value.length > 12) {
        recentEmojis.value = recentEmojis.value.slice(0, 12);
      }
    } else {
      // 如果已存在，移到最前面
      const index = recentEmojis.value.indexOf(emoji);
      if (index > -1) {
        recentEmojis.value.splice(index, 1);
        recentEmojis.value.unshift(emoji);
      }
    }

    // 保存到本地存储
    localStorage.setItem(
      "comment-recent-emojis",
      JSON.stringify(recentEmojis.value)
    );
  } catch (error) {
    console.error("Error updating recent emojis:", error);
  }
};

// 获取表情名称（简单实现）
const getEmojiName = (emoji: string) => {
  return emoji;
};

// 加载最近使用的表情
onMounted(() => {
  try {
    const saved = localStorage.getItem("comment-recent-emojis");
    if (saved) {
      const parsed = JSON.parse(saved);
      if (Array.isArray(parsed)) {
        recentEmojis.value = parsed.slice(0, 12); // 确保最多12个
      } else {
        recentEmojis.value = [];
      }
    } else {
      recentEmojis.value = [];
    }
  } catch (error) {
    console.error("Failed to load recent emojis:", error);
    recentEmojis.value = [];
  }
});
</script>

<style scoped lang="scss">
.simple-emoji-picker {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px; /* 更宽的显示区域 */
  overflow: hidden;
  background: #fff;
  border-radius: 8px;

  .emoji-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    padding: 8px 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e6ea;

    .category-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 14px;
      cursor: pointer;
      background: transparent;
      border: none;
      border-radius: 6px;
      transition: all 0.2s ease;

      &:hover {
        background: rgb(30 128 255 / 6%);
      }

      &.active {
        color: white;
        background: #1e80ff;
      }
    }
  }

  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2px;
    padding: 8px;

    .emoji-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      font-size: 16px;
      cursor: pointer;
      background: transparent;
      border: none;
      border-radius: 4px;
      transition: all 0.2s ease;

      &:hover {
        background: rgb(30 128 255 / 6%);
        transform: scale(1.1);
      }
    }

    &.recent-grid {
      padding-bottom: 8px;
      margin-bottom: 4px;
      border-bottom: 1px solid #e4e6ea;
    }

    &.main-grid {
      max-height: 256px; /* 8行 * 32px */
      overflow-y: auto;
    }
  }

  .recent-section {
    .section-title {
      padding: 6px 12px;
      font-size: 11px;
      font-weight: 600;
      color: #8a919f;
      text-align: center;
      background: #f8f9fa;
    }
  }
}

// 暗色主题适配
.dark {
  .simple-emoji-picker {
    color: #e5e6eb;
    background: #1e1e28;

    .emoji-search {
      border-bottom-color: #3a3a4a;
    }

    .emoji-categories {
      background: #2a2a3a;
      border-bottom-color: #3a3a4a;

      .category-btn {
        &:hover {
          background: rgb(30 128 255 / 10%);
        }
      }
    }

    .recent-section {
      border-top-color: #3a3a4a;

      .section-title {
        color: #86909c;
        background: #2a2a3a;
      }
    }

    .emoji-grid {
      .emoji-btn {
        &:hover {
          background: rgb(30 128 255 / 10%);
        }
      }
    }
  }
}
</style>
